import { useI18n } from '/@/hooks/web/useI18n';
import { useAppStore } from '/@/store/modules/app';
const appStore = useAppStore();
const { t } = useI18n();
export interface WidgetForm {
  list: any[];
  config: {
    formType: string;
    size: string;
    // hideRequiredMark: boolean;
    layout: string;
    labelAlign: string;
    labelCol: {
      span: number;
      offset: number;
    };
    formWidth: number;
  };
  hiddenComponent: HiddenComponentInfo[];
}

export const widgetForm: WidgetForm = {
  list: [],
  config: {
    formType: 'modal',
    size: 'default',
    layout: 'horizontal',
    labelAlign: 'right',
    labelCol: {
      span: 3,
      offset: 0,
    },
    formWidth: 800,
  },
  hiddenComponent: [],
};

export const basicComponents = [
  {
    label: t('单行文本'),
    typeName: t('单行文本'),
    type: 'input',
    options: {
      width: '100%',
      span: '',
      defaultValue: '',
      placeholder: t('请输入单行文本'),
      maxlength: null,
      prefix: '',
      suffix: '',
      addonBefore: '',
      addonAfter: '',
      disabled: false,
      allowClear: false,
      showLabel: true,
      required: false,
      rules: [],
      events: {},
      isSave: false,
    },
  },
  {
    label: t('多行文本'),
    typeName: t('多行文本'),
    type: 'textarea',
    options: {
      width: '100%',
      span: '',
      defaultValue: '',
      placeholder: t('请输入多行文本'),
      maxlength: null,
      rows: 4,
      autoSize: false,
      showCount: false,
      disabled: false,
      showLabel: true,
      allowClear: false,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('密码框'),
    typeName: t('密码框'),
    type: 'password',
    options: {
      width: '100%',
      span: '',
      defaultValue: '',
      placeholder: t('请输入密码框'),
      maxlength: null,
      prefix: '',
      addonBefore: '',
      addonAfter: '',
      visibilityToggle: true,
      disabled: false,
      allowClear: false,
      showLabel: true,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('计数组件'),
    typeName: t('计数组件'),
    type: 'number',
    options: {
      width: '100%',
      span: '',
      defaultValue: 0,
      min: 0,
      max: 100,
      step: 1,
      maxlength: null,
      disabled: false,
      showLabel: true,
      controls: true,
      required: false,
      subTotal: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('编辑器'),
    typeName: t('编辑器'),
    type: 'richtext-editor',
    options: {
      span: '',
      defaultValue: '',
      width: '100%',
      disabled: false,
      showLabel: true,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('编码组件'),
    typeName: t('编码组件'),
    type: 'auto-code',
    options: {
      width: '100%',
      span: '',
      placeholder: t('请输入编码组件'),
      prefix: '',
      suffix: '',
      addonBefore: '',
      addonAfter: '',
      showLabel: true,
      autoCodeRule: null,
      required: false,
    },
  },
];

export const advanceComponents = [
  {
    label: t('下拉选择框'),
    typeName: t('下拉选择框'),
    type: 'select',
    options: {
      width: '100%',
      span: '',
      placeholder: t('请选择下拉选择'),
      showLabel: true,
      showSearch: false,
      clearable: false,
      disabled: false,
      staticOptions: [
        {
          key: 1,
          label: 'Option 1',
          value: 'Option 1',
        },
        {
          key: 2,
          label: 'Option 2',
          value: 'Option 2',
        },
        {
          key: 3,
          label: 'Option 3',
          value: 'Option 3',
        },
      ],
      defaultSelect: '', //静态数据默认选择
      datasourceType: 'staticData',
      params: null,
      dataSource: undefined,
      dataSourceId: undefined,
      labelField: 'label',
      valueField: 'value',
      apiConfig: {},
      itemId: undefined,
      dicOptions: [],
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('级联选择器'),
    typeName: t('级联选择器'),
    type: 'cascader',
    options: {
      width: '100%',
      span: '',
      placeholder: t('请选择级联选择器'),
      showFormat: 'all',
      separator: '/',
      selectedConfig: 'selectMostChildLevel',
      disabled: false,
      allowClear: false,
      showLabel: true,
      apiConfig: {},
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('联想下拉'),
    typeName: t('联想下拉'),
    type: 'associate-select',
    options: {
      width: '100%',
      span: '',
      placeholder: t('请选择联想下拉'),
      showLabel: true,
      showSearch: false,
      disabled: false,
      datasourceType: 'api',
      dataSource: undefined,
      dataSourceId: undefined,
      labelField: 'label',
      valueField: 'value',
      apiConfig: {},
      itemId: undefined,
      dicOptions: [],
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('联想弹层'),
    typeName: t('联想弹层'),
    type: 'associate-popup',
    options: {
      popupType: 'associate',
      width: '100%',
      span: '',
      placeholder: t('请选择联想弹层'),
      showLabel: true,
      disabled: false,
      datasourceType: 'api',
      dataSource: undefined,
      dataSourceId: undefined,
      labelField: 'label',
      valueField: 'value',
      apiConfig: {},
      itemId: undefined,
      dicOptions: [],
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('多选弹层'),
    typeName: t('多选弹层'),
    type: 'multiple-popup',
    options: {
      popupType: 'multiple',
      width: '100%',
      span: '',
      defaultValue: '',
      placeholder: t('请选择多选弹层'),
      showLabel: true,
      disabled: false,
      datasourceType: 'api',
      dataSource: undefined,
      dataSourceId: undefined,
      labelField: 'label',
      valueField: 'value',
      apiConfig: {},
      itemId: undefined,
      dicOptions: [],
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('行政区域'),
    typeName: t('行政区域'),
    type: 'area',
    options: {
      width: '100%',
      span: '',
      placeholder: t('请选择行政区域'),
      showLabel: true,
      disabled: false,
      allowClear: false,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('多选组件'),
    typeName: t('多选组件'),
    type: 'checkbox',
    options: {
      span: '',
      showLabel: true,
      disabled: false,
      staticOptions: [
        {
          key: 1,
          label: 'option 1',
          value: 'option 1',
        },
        {
          key: 2,
          label: 'option 2',
          value: 'option 2',
        },
        {
          key: 3,
          label: 'option 3',
          value: 'option 3',
        },
      ],
      datasourceType: 'staticData',
      defaultSelect: '',
      dataSource: undefined,
      dataSourceId: undefined,
      labelField: 'label',
      valueField: 'value',
      apiConfig: {},
      itemId: undefined,
      dicOptions: [],
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('单选组件'),
    typeName: t('单选组件'),
    type: 'radio',
    options: {
      span: '',
      showLabel: true,
      disabled: false,
      optionType: 'default',
      staticOptions: [
        {
          key: 1,
          label: 'option 1',
          value: 'option 1',
        },
        {
          key: 2,
          label: 'option 2',
          value: 'option 2',
        },
        {
          key: 3,
          label: 'option 3',
          value: 'option 3',
        },
      ],
      datasourceType: 'staticData',
      dataSource: undefined,
      dataSourceId: undefined,
      labelField: 'label',
      valueField: 'value',
      defaultSelect: '',
      apiConfig: {},
      itemId: undefined,
      dicOptions: [],
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('开关组件'),
    typeName: t('开关组件'),
    type: 'switch',
    options: {
      span: '',
      defaultValue: 1,
      checkedChildren: '',
      unCheckedChildren: '',
      checkedColor: appStore.getProjectConfig.themeColor,
      unCheckedColor: '#bbbdbf',
      showLabel: true,
      disabled: false,
      events: {},
    },
  },
  {
    label: t('滑块组件'),
    typeName: t('滑块组件'),
    type: 'slider',
    options: {
      span: '',
      defaultValue: 0,
      min: 0,
      max: 100,
      step: 1,
      showLabel: true,
      disabled: false,
      reverse: false,
      events: {},
    },
  },
  {
    label: t('时间选择'),
    typeName: t('时间选择'),
    type: 'time',
    options: {
      span: '',
      defaultValue: '',
      width: '100%',
      placeholder: t('请选择时间选择'),
      format: 'HH:mm:ss',
      showLabel: true,
      allowClear: true,
      disabled: false,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('时间范围'),
    typeName: t('时间范围'),
    type: 'time-range',
    options: {
      span: '',
      width: '100%',
      showTime: false,
      format: 'HH:mm:ss',
      startTimePlaceholder: t('请选择开始时间'),
      endTimePlaceholder: t('请选择结束时间'),
      showLabel: true,
      disabled: false,
      allowClear: true,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('日期选择'),
    typeName: t('日期选择'),
    type: 'date',
    options: {
      span: '',
      defaultValue: '',
      width: '100%',
      placeholder: t('请选择日期选择'),
      format: 'YYYY-MM-DD HH:mm:ss',
      showLabel: true,
      allowClear: true,
      disabled: false,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('日期范围'),
    typeName: t('日期范围'),
    type: 'date-range',
    options: {
      span: '',
      defaultValue: [],
      width: '100%',
      showTime: false,
      format: 'YYYY-MM-DD',
      startTimePlaceholder: t('请选择开始日期'),
      endTimePlaceholder: t('请选择结束日期'),
      showLabel: true,
      disabled: false,
      allowClear: true,
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('评分组件'),
    typeName: t('评分组件'),
    type: 'rate',
    options: {
      span: '',
      defaultValue: 0,
      count: 5,
      showLabel: true,
      allowHalf: false,
      disabled: false,
      events: {},
    },
  },
  {
    label: t('颜色选择'),
    typeName: t('颜色选择'),
    type: 'picker-color',
    options: {
      span: '',
      defaultValue: '#000000',
      showLabel: true,
      disabled: false,
      events: {},
    },
  },
  {
    label: t('上传组件'),
    typeName: t('上传组件'),
    type: 'upload',
    options: {
      span: '',
      defaultValue: [],
      // name: 'file',
      accept: '',
      maxNumber: 5,
      maxSize: 5,
      showLabel: true,
      multiple: false,
      disabled: false,
      required: false,
      events: {},
      listType: 'text',
    },
  },
  {
    label: t('图片组件'),
    typeName: t('图片组件'),
    type: 'image',
    options: {
      span: '',
      defaultValue: '',
      showLabel: true,
      events: {},
    },
  },
  {
    label: t('按钮组件'),
    typeName: t('按钮组件'),
    type: 'button',
    options: {
      name: t('按钮'),
      buttonWidth: '',
      buttonHeight: '',
      prefix: '',
      suffix: '',
      disabled: false,
      events: {},
    },
  },
  {
    label: t('地图选择'),
    typeName: t('地图选择'),
    type: 'map',
    options: {
      span: '',
      width: '100%',
      defaultValue: '',
      placeholder: t('请选择地址'),
      prefix: '',
      suffix: 'mdi:map-marker-radius-outline',
      showLabel: true,
      disabled: false,
      required: false,
      address: '',
      latiAndLong: '',
      rules: [],
      events: {},
    },
  },
  {
    label: t('二维码组件'),
    typeName: t('二维码组件'),
    type: 'qrcode',
    options: {
      span: '',
      defaultValue: '',
      showLabel: true,
      codeType: 'fixed',
      apiConfig: {},
    },
  },
];

// 布局组件
export const layoutComponents = [
  {
    label: t('表格组件'),
    typeName: t('表格组件'),
    type: 'form',
    children: [],
    options: {
      span: '24',
      preloadType: 'api',
      apiConfig: {},
      itemId: '',
      dicOptions: [],
      useSelectButton: false,
      buttonName: t('选择数据'),
      showLabel: true,
      showComponentBorder: true,
      showFormBorder: true,
      showIndex: false,
      multipleHeads: [],
    },
  },
  {
    label: t('单表组件'),
    typeName: t('单表组件'),
    type: 'one-for-one',
    children: [],
    options: {
      span: '24',
      showLabel: true, // 显示标题文本或按钮名称/描述/选择按钮/显示位置/显示组件边
    },
  },
  {
    label: t('选项卡组件'),
    typeName: t('选项卡组件'),
    type: 'tab',
    layout: [
      {
        name: 'tab1',
        span: 24,
        list: [],
      },
      {
        name: 'tab2',
        span: 24,
        list: [],
      },
      {
        name: 'tab3',
        span: 24,
        list: [],
      },
    ],
    options: {
      tabPosition: 'top',
      type: 'line',
    },
  },
  {
    label: t('卡片布局'),
    typeName: t('卡片布局'),
    type: 'card',
    icon: 'ant-design:credit-card-twotone',
    layout: [
      {
        name: 'card',
        span: 24,
        list: [],
      },
    ],
    options: {
      title: '卡片',
    },
  },
  {
    label: t('栅格布局'),
    typeName: t('栅格布局'),
    type: 'grid',
    layout: [
      {
        span: 12,
        list: [],
      },
      {
        span: 12,
        list: [],
      },
    ],
    options: {
      gutter: 16,
      justify: 'start',
      align: 'top',
    },
  },
  {
    label: t('标题'),
    typeName: t('标题'),
    type: 'title',
    layout: [
      {
        span: 24,
        list: [],
      },
    ],
    options: {
      defaultValue: t('标题'),
      color: '',
      align: 'center',
      fontSize: 18,
    },
  },
  {
    label: t('分割线'),
    type: 'divider',
    options: {
      defaultValue: t('分割线'),
      orientation: 'left',
      marginTop: 0,
      marginBottom: 0,
    },
  },
];

export const workFlowComponents = [
  {
    label: t('意见簿'),
    typeName: t('意见簿'),
    type: 'opinion',
    options: {
      span: '',
      placeholder: t('（该组件仅用于接收工作流审批意见，不可手动编辑）'),
      width: '100%',
      showLabel: true,
    },
  },
];

export const infoComponents = [
  {
    label: t('信息体'),
    typeName: t('信息体'),
    type: 'info',
    options: {
      span: '',
      width: '100%',
      placeholder: '',
      infoType: 0, // 0当前用户 1当前组织 2当前时间
      loadAgain: false, //二次加载
      showLabel: true,
      disabled: true,
    },
  },
  {
    label: t('组织架构'),
    typeName: t('组织架构'),
    type: 'organization',
    options: {
      span: '',
      width: '100%',
      defaultValue: undefined,
      orgzType: 0,
      placeholder: t('请选择组织架构'),
      showLabel: true,
      disabled: false,
      required: false,
      events: {},
    },
  },
  {
    label: t('人员选择'),
    typeName: t('人员选择'),
    type: 'user',
    options: {
      span: '',
      width: '100%',
      defaultValue: '',
      placeholder: t('请选择人员'),
      userType: 0,
      prefix: '',
      suffix: 'ant-design:setting-outlined',
      showLabel: true,
      disabled: false,
      required: false,
      events: {},
    },
  },
];

export const financeComponents = [
  {
    label: t('计算组件'),
    typeName: t('计算组件'),
    type: 'computational',
    options: {
      span: '',
      width: '100%',
      defaultValue: 0,
      placeholder: t('请输入计算组件'),
      addonBefore: '',
      addonAfter: '',
      prefix: '',
      maxlength: null,
      showLabel: true,
      disabled: false,
      subTotal: false,
      computationalConfig: [],
      computationalConfigValue: t('== 请填写计算式配置 =='),
      beAdoptedComponent: [],
      required: false,
      rules: [],
      events: {},
    },
  },
  {
    label: t('货币大写'),
    typeName: t('货币大写'),
    type: 'money-chinese',
    options: {
      span: '',
      width: '100%',
      defaultValue: 0,
      placeholder: t('请输入货币大写'),
      addonBefore: '',
      addonAfter: '',
      prefix: '',
      suffix: '',
      maxlength: null,
      showLabel: true,
      disabled: false,
      subTotal: false,
      computationalConfig: [],
      computationalConfigValue: t('== 请填写计算式配置 =='),
      beAdoptedComponent: [],
      required: false,
      rules: [],
      events: {},
    },
  },
];

// 不需要选择表与字段的组件
export const noHaveTableAndField = [
  'grid',
  'divider',
  'tab',
  'card',
  'title',
  'button',
  'opinion',
  'image',
  'qrcode',
];
// 不需要绑定字段的组件
export const noHaveField = [
  'grid',
  'divider',
  'tab',
  'card',
  'one-for-one',
  'title',
  'button',
  'opinion',
  'form',
  'time-range',
  'date-range',
  'image',
  'qrcode',
];
//不需要在列表页展示的
export const noShowList = [
  'grid',
  'divider',
  'tab',
  'card',
  'title',
  'button',
  'opinion',
  'form',
  'password',
  'upload',
  'image',
  'richtext-editor',
  'hiddenComponent',
  'qrcode',
  'one-for-one',
];
// 没有标题的组件
export const noHaveTitle = ['grid', 'divider', 'card', 'button', 'title'];
// 使用栅格布局方式的组件
export const gridComponents = ['grid', 'form'];
//需要配置 数据源 的组件  ||  远程组件
export const remoteComponents = [
  'select',
  'radio',
  'checkbox',
  'associate-select',
  'associate-popup',
  'multiple-popup',
];
//子表单不能使用的组件
export const subFormUnUseComponents = [
  'card',
  'tab',
  'grid',
  'form',
  'title',
  'divider',
  'richtext-editor',
  'auto-code',
  'button',
  'slider',
  'image',
  'opinion',
  'qrcode',
  'one-for-one',
];

//一对一子表单组件不能使用的组件
export const oneForOneUnUseComponents = ['form', 'one-for-one'];

//字段格式为短文本的组件
export const shortTextComponents = [
  'input',
  'password',
  'auto-code',
  'select',
  'cascader',
  'associate-select',
  'associate-popup',
  'area',
  'radio',
  'picker-color',
  'info',
  'organization',
];

//字段格式为长文本的组件
export const longTextComponents = [
  'textarea',
  'richtext-editor',
  'multiple-popup',
  'checkbox',
  'upload',
  'image',
  'user',
];

//字段格式为整数的组件
export const integerComponents = ['switch'];

//字段格式为小数的组件
export const decimalsComponents = ['number', 'slider', 'computational', 'money-chinese', 'rate'];

//字段格式为日期时间的组件
export const dateTimeComponents = ['date', 'date-range'];

//字段格式为时间的组件
export const timeComponents = ['time', 'time-range'];

//不能设置子表预加载的组件
export const unPreloadComponents = [
  'card',
  'tab',
  'grid',
  'form',
  'title',
  'divider',
  'image',
  'opinion',
  'upload',
  'picker-color',
  'organization',
];
//无法配置触发事件
export const noConfigComponentEvent = [
  'auto-code',
  'form',
  'tab',
  'card',
  'grid',
  'title',
  'divider',
  'opinion',
  'info',
  'image',
  'qrcode',
];

//触发事件没有失焦事件的组件
export const noBlurComponentEvent = [
  'associate-popup',
  'multiple-popup',
  'radio',
  'checkbox',
  'switch',
  'slider',
  'rate',
  'picker-color',
  'upload',
  'button',
  'user',
];
//触发事件没有点击事件的组件
export const noClickComponentEvent = ['radio', 'checkbox', 'switch', 'slider', 'rate'];
//触发事件没有值改变事件的组件
export const noChangeComponentEvent = ['button'];
//无法配置正则校验
export const noConfigRegularSetting = [
  'auto-code',
  'switch',
  'slider',
  'rate',
  'picker-color',
  'upload',
  'image',
  'button',
  'form',
  'tab',
  'card',
  'grid',
  'title',
  'divider',
  'opinion',
  'info',
  'organization',
  'user',
  'qrcode',
];

//数据来源为数据字典的组件添加默认值选项
export const needDicDefaultValue = [
  'select',
  'associate-select',
  'associate-popup',
  'multiple-popup',
  'checkbox',
  'radio',
];
//需要字段名及表名为大写的数据库类型
export const upperFieldDb = ['oracle', 'dm'];

export interface FieldInfo {
  name: string; //字段名
  type: ColumnType; //字段类型
  length: number; //字段长度
  isPk: boolean; // 是否主键
  isNullable: boolean; //是否可空
  disabled?: boolean; //字段是否可选
}

export interface TableInfo {
  name: string; //表名
  isMain: boolean; //是否主表
  fields: FieldInfo[]; //字段
  disabled?: boolean; //是否可选
}

export enum ColumnType {
  //字符串
  STRING,
  //数字
  NUMBER,
  //布尔
  BOOL,
  //日期
  DATE,
  //时间
  TIME,
}

export enum CodeType {
  Vue = 'vue',
  Html = 'html',
}

export enum PlatformType {
  Antd,
  Element,
}

export interface ComputationalConfig {
  $index: number; //表达式的唯一标识
  label: string; //名称
  type: string; //类型
  key: string; //唯一标识
  bindTable?: string; //绑定表
  bindField?: string; //绑定字段
  computationalMethod?: string; //计算方式
  isMainForm?: boolean; //是否是主表组件
}

export interface HiddenComponentInfo {
  key: string; //id
  type: 'hiddenComponent';
  code: string; //编码
  label: string; //名称
  value: string; //值
  bindTable: string; //绑定表
  bindField: string; //绑定字段
}

export interface DataSourceConfig {
  key: number; //唯一标识
  name: string; //名称
  show?: boolean; //是否展示
  width?: string | number; //宽度
  bindField?: string; //绑定字段
}

export interface MutipleHeadInfo {
  key: string; //id
  title: string; //名称
  dataIndex?: string; //名称
  children: string[] | object[]; //子列
  align?: string; //对齐
  isSingle?: boolean; //是否合并列，false-是，true-否
}
